<template>
  <div :class="$store.state.appPrefix + '-c-change-password'" v-loading="isLoading">
    <div class="title">密码修改</div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="110px"
      size="small"
      class="main-password"
    >
      <el-form-item label="原密码：" prop="oldpassword">
        <el-input
          class="input-custom"
          v-model="form.oldpassword"
          :type="oldPasswordType"
          clearable>
          <icon slot="suffix" size="14px" @click.native="oldPasswordType === 'password' ? oldPasswordType = 'text' : oldPasswordType = 'password'" :href="oldPasswordType === 'password' ? 'icon-yincang' : 'icon-xianshi'"></icon>
        </el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newpassword">
        <el-input
          class="input-custom"
          v-model="form.newpassword"
          :type="newPasswordType"
          clearable>
          <icon slot="suffix" size="14px" @click.native="newPasswordType === 'password' ? newPasswordType = 'text' : newPasswordType = 'password'" :href="newPasswordType === 'password' ? 'icon-yincang' : 'icon-xianshi'"></icon>
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="confirmpassword">
        <el-input
          class="input-custom"
          v-model="form.confirmpassword"
          :type="confirmPasswordType"
          clearable>
          <icon slot="suffix" size="14px" @click.native="confirmPasswordType === 'password' ? confirmPasswordType = 'text' : confirmPasswordType = 'password'" :href="confirmPasswordType === 'password' ? 'icon-yincang' : 'icon-xianshi'"></icon>
        </el-input>
      </el-form-item>
      <el-button type="primary" class="modify-btn" @click="passwordFn()"
        >修改密码</el-button
      >
      <el-button @click="$router.go(-1)"
        >取消</el-button
      >
    </el-form>
  </div>
</template>

<script>
import Icon from 'components/icon'
import { userModifyPass } from './models';
import { userLogout, clearCacheForLogout } from '../header/models'
import { getTokenFromCookie } from 'common/auth'
import validator from 'utils/form-validate'

export default {
  components: {
    Icon
  },
  data() {
    const checkPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再输入一次新密码'));
      } else {
        if (this.form.newpassword !== value) {
          callback(new Error('两次密码输入不一致'));
        }
        validator.validPassword(rule, value, callback)
      }
    }
    return {
      oldPasswordType: 'password',
      newPasswordType: 'password',
      confirmPasswordType: 'password',
      form: {
        newpassword: '',
        oldpassword: '',
        confirmpassword: '',
        isLoading: false
      },
      rules: {
        oldpassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { trigger: 'blur', validator: validator.validPassword }
        ],
        newpassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { trigger: 'blur', validator: validator.validPassword }
        ],
        confirmpassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: checkPassword, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    async $doLogout() {
      const token = getTokenFromCookie()
      userLogout({ token: token }).then(() => {
        clearCacheForLogout()
        window.location.href = 'login.html'
      }).catch(err => {
        console.log('$logout err:', err)
      })
    },
    $updatePass() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.updatePass()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    async updatePass() {
      this.isLoading = true

      try {
        await userModifyPass({
          oldPass: this.form.oldpassword,
          newPass: this.form.newpassword,
          reNewPass: this.form.confirmpassword,
        });
        this.isLoading = false
        this.$message({
          showClose: true,
          message: '密码修改成功, 请尝试使用新密码登录。',
          type: 'success'
        })

        this.$doLogout()
      } catch (err) {
        console.log('$updatePass err:', err)
        this.isLoading = false
        this.$message({
          showClose: true,
          message: '密码修改失败，请稍后再尝试！！',
          type: 'warning'
        })
      }
    },

    passwordFn() {
      const that = this;
      if (that.form.confirmpassword === that.form.newpassword) {
        this.$updatePass()
      } else {
        this.$message({
          showClose: true,
          message: '两次新密码输入内容不一致!',
          type: 'warning'
        })
      }
    },
  },
};
</script>
